<%-- 
    Document   : index4
    Created on : 30/04/2013, 12:12:32 PM
    Author     : sala115
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" session="true"%>
<!DOCTYPE html>
<%
    if(request.getSession() != null){
        if(request.getSession().getAttribute("oky") == null){
            RequestDispatcher vista = request.getRequestDispatcher("index.jsp?msj=1");
            vista.forward(request, response);
        }
    }
%>

<html lang="en">
    <head>
        <title>Galería</title>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Slicebox - 3D Image Slider with Fallback" />
        <meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" />
		<meta name="author" content="Pedro Botelho for Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
		<link rel="stylesheet" type="text/css" href="css/custom.css" />
		<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
	</head>
	<body>
		<div class="container">

			<div class="codrops-top clearfix">
				<a href="menu2.jsp"><span>&laquo; Volver </span>Al menú</a>
				<span class="right">
					
					<a href="index.jsp?c=76rgfh"><strong>Cerrar sessión</strong></a>
				</span>
			</div>

			<h1>Acueducto<span>La palma, rivera y Altogrande</span></h1>
		<div class="more">
	<ul id="sb-examples">
	</ul>
			</div>

			<div class="wrapper">

				<ul id="sb-slider" class="sb-slider">
					<li>
						<img src="images/1.jpg" alt="image1"/>						<div class="sb-description">
							<h3>Imagen del menú</h3>
						</div>
					</li>
					<li>
						<img src="images/2.jpg" alt="image2"/>
						<div class="sb-description">
							<h3>Logo del proyecto</h3>
						</div>
					</li>
					<li>
						<img src="images/3.jpg" alt="image1"/>
						<div class="sb-description">
							<h3>Bocatoma</h3>
						</div>
					</li>
					<li>
						<img src="images/4.jpg" alt="image1"/>						<div class="sb-description">
							<h3>Almacenamiento de agua</h3>
						</div>
					</li>
					<li>
						<img src="images/5.jpg" alt="image1"/>
						<div class="sb-description">
							<h3>Desarenador</h3>
						</div>
					</li>
					<li>
						<img src="images/6.jpg" alt="image1"/>
						<div class="sb-description">
							<h3>Logosimbolo</h3>
						</div>
					</li>
					<li>
						<img src="images/7.jpg" alt="image1"/>						<div class="sb-description">
							<h3>Logotipo</h3>
						</div>
					</li>
				</ul>

				<div id="shadow" class="shadow"></div>

				<div id="nav-arrows" class="nav-arrows">
					<a href="#">Next</a>
					<a href="#">Previous</a>
				</div>

			</div><!-- /wrapper -->
			<p class="info"><strong>Imagenes:</strong> Tomadas directamente en el acueducto, logos,logosimbolos del acueducto.</p>

		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.slicebox.js"></script>
		<script type="text/javascript">
			$(function() {
				
				var Page = (function() {

					var $navArrows = $( '#nav-arrows' ).hide(),
						$shadow = $( '#shadow' ).hide(),
						slicebox = $( '#sb-slider' ).slicebox( {
							onReady : function() {

								$navArrows.show();
								$shadow.show();

							},
							orientation : 'r',
							cuboidsRandom : true,
							disperseFactor : 30
						} ),
						
						init = function() {

							initEvents();
							
						},
						initEvents = function() {

							// add navigation events
							$navArrows.children( ':first' ).on( 'click', function() {

								slicebox.next();
								return false;

							} );

							$navArrows.children( ':last' ).on( 'click', function() {
								
								slicebox.previous();
								return false;

							} );

						};

						return { init : init };

				})();

				Page.init();

			});
		</script>
	</body>
</html>	
